<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta name="format-detection" content="telephone=no">
		<title>{:C('WEB_SITE_TITLE')}</title>
		<link rel="stylesheet" href="__PUBLIC__/Home/css/common.css">
		<link rel="stylesheet" href="__PUBLIC__/Home/css/main.css">
		<script src="__PUBLIC__/Home/js/zepto.js"></script>
		<script src="__PUBLIC__/Home/js/iscroll-probe.js"></script>
		<include file="Public/weixin"/>
		<script src="__PUBLIC__/Home/js/delIOS_huitan.js"></script>
		<style>
			/*下拉加载样式*/
			#wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
			}
			#loadBin{color: #5d5d5d;text-align: center;line-height: 30px;}
		</style>
	</head>
	<body onLoad="onload()" class="box">
		<!--提示文字-->
		<div class="tip" style="opacity: 0;z-index: -1"></div>
		<!--正文区域-->
		<div id="cartTop" class="topBackTitle">
			<div class="contain maxWidth">
				<a class="hz back" href="javascript:;">&#xe600;</a>购物车<a href="javascript:;" class="right">编辑</a>
			</div>
		</div>
		<div id="cartMain" class="fastscroll">
			<div class="contain maxWidth">
				<div class="content">
					<div id="wrapper" class="maxWidth">
						<div>
							<ul class="list">
								<volist name="list" id="item">
								<div class="clear" cart_id="{$item.id}" max_num="6">
									<div class="circleGray" cart_id="{$item.id}">
										<span class="hz">&#xe613;</span>
									</div>
									<div class="center">
										<a href="/Product/detail?id={$item.product_id}"><img src="{$item.image}"></a>
									</div>
									<div class="right">
										<p class="title"><a href="/Product/detail?id={$item.product_id}">{$item.title}</a></p>
										<div class="price">
											
											<p class="money">
												<em>&yen;<span>{$item['product_price']}</span></em><del>&yen;<span>299.00</span></del>
											</p>
										</div>
										<div class="addJianCom">
											<a href="javascript:;" class="hz jian nooperate" attrid="{$item.id}">&#xe616;</a>
											<input type="text" value="{$item.product_num}">
											<a href="javascript:;" class="hz add canoperate" attrid="{$item.id}">&#xe615;</a>
										</div>
									</div>
								</div>
								</volist>
								<volist name="list1" id="item">
								<div class="clear" cart_id="{$item.id}" max_num="6">
									<div class="circleGray" cart_id="{$item.id}">
										<span class="hz">&#xe613;</span>
									</div>
									<div class="center">
										<a href="/Product/detail?id={$item.product_id}"><img src="{$item.image}"></a>
									</div>
									<div class="right">
										<p class="title"><a href="/Product/detail?id={$item.product_id}">{$item.title}(团)</a></p>
										<div class="price">
											
											<p class="money">
												<em>&yen;<span>{$item['product_price']}</span></em><del>&yen;<span>299.00</span></del>
											</p>
										</div>
										<div class="addJianCom">
											<a href="javascript:;" class="hz jian nooperate" attrid="{$item.id}">&#xe616;</a>
											<input type="text" value="{$item.product_num}">
											<a href="javascript:;" class="hz add canoperate" attrid="{$item.id}">&#xe615;</a>
										</div>
									</div>
								</div>
								</volist>
							</ul>
							<div id="loadBin"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="cartBot2">
			<div class="contain maxWidth">
				<div class="quanxuan left">
					<div class="circleGray l">
						<span class="hz">&#xe613;</span>
					</div>
					<p class="l">全选</p>
				</div>
				<div class="zong left">
					总金额：<span>&yen;<em>00.00</em></span>
				</div>
				<a href="javascript:;" class="right">去结算</a>
			</div>
		</div>
		<include file="Public:footer" />
	</body>

	<script>
		//返回按钮
		$('#cartTop .back').on('click',function(){
			window.history.go(-1);
		});

		//tip
		function tipFun(str){
			$('.tip').text(str).css({
				'opacity':'1',
				'z-index':'9999'
			});
			setTimeout(function(){
				$('.tip').css('opacity','0');
				setTimeout(function(){
					$('.tip').css('z-index','-1');
				},300);
			},1300);
		}

		//点击列表项的 圈
		$('#wrapper .list').on('click','.clear .circleGray',function(){
			if($(this).find('.hz').hasClass('active')){
				$(this).find('.hz').removeClass('active');
				checkSumNum();
				checkQuanxuan();
			}else{
				$(this).find('.hz').addClass('active');
				checkSumNum();
				checkQuanxuan();
			}
		});

		//点击全选前的 圈
		$('#cartBot2 .contain .circleGray').on('click',function(){
			var all=$('#cartMain .contain .clear .circleGray .hz');
			if($('#cartBot2 .contain .circleGray .hz').hasClass('active')){
				$('#cartBot2 .contain .circleGray .hz').removeClass('active');
				for(var j=0;j<all.length;j++){
					$(all[j]).removeClass('active');
				}
				checkSumNum();
			}else{
				$('#cartBot2 .contain .circleGray .hz').addClass('active');
				for(var j=0;j<all.length;j++){
					$(all[j]).addClass('active');
				}
				checkSumNum();
			}
		});

		//检测总计
		function checkSumNum(){
			var moneyobj=$('#cartMain .contain .clear .right .price em span');
			var sum=0;
			for(var i=0;i<moneyobj.length;i++){
				if($(moneyobj[i]).closest('.clear').find('.circleGray .hz').hasClass('active')){
					var num=$(moneyobj[i]).closest('.price').siblings('.addJianCom').children('input').val();
					sum=sum+parseFloat(moneyobj[i].innerHTML)*parseFloat(num);
				}
			}
			$('#cartBot2 .contain .zong span em').text(sum.toFixed(2));
		}

		//检测是否全选
		function checkQuanxuan(){
			var sumNum=$('#cartMain .contain .clear .circleGray').length;
			var selectNum=$('#cartMain .contain .clear .circleGray .active').length;
			if(sumNum==selectNum){
				$('#cartBot2 .contain .circleGray .hz').addClass('active');
			}else{
				$('#cartBot2 .contain .circleGray .hz').removeClass('active');
			}
		}

		//点击+
		$('#cartMain').on('click','.addJianCom .add',function(ev){
			var cart_id=$(ev.currentTarget.parentNode.parentNode.parentNode).attr('cart_id');
			var kucun=$(ev.currentTarget.parentNode.parentNode.parentNode).attr('max_num');//从后台获取的库存;//从后台获取的库存
			var currNum=$(this).siblings('input').val();
			currNum++;
			if(currNum>kucun){currNum=kucun;}
			$(this).siblings('input').val(currNum);
			$.ajax({
				//提交数据的类型 POST GET
				type:"POST",
				//提交的网址
				url:"{:U('Cart/addnum')}",
				//提交的数据
				data:{'cart_id':cart_id},
				//返回数据的格式
				datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
				//在请求之前调用的函数
				//成功返回之后调用的函数             
				success:function(json){   
				}
			});
			checkSumNum();
		});
		//点击-
		$('#cartMain').on('click','.addJianCom .jian',function(ev){
			var cart_id=$(ev.currentTarget.parentNode.parentNode.parentNode).attr('cart_id');
			var currNum=$(this).siblings('input').val();
			currNum--;
			if(currNum<1){currNum=1;}
			$(this).siblings('input').val(currNum);
			$.ajax({
				//提交数据的类型 POST GET
				type:"POST",
				//提交的网址
				url:"{:U('Cart/reduce')}",
				//提交的数据
				data:{'cart_id':cart_id},
				//返回数据的格式
				datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
				//在请求之前调用的函数
				//成功返回之后调用的函数             
				success:function(json){   
				}
			});
			checkSumNum();
		});

		//点击编辑 进行删除购物车操作 点击完成 切换回购物车界面
		$('#cartTop .right').on('click',function(){
			if($(this).text()=='编辑'){
				$(this).text('完成');
				$('#cartMain .contain .clear .circleGray, #cartBot2 .contain .circleGray').children('.hz').removeClass('active');
				$('#cartBot2 .contain .zong').css('display','none');
				$('#cartBot2 .contain .right').text('删除');
			}else if($(this).text()=='完成'){
				$(this).text('编辑');
				$('#cartMain .contain .clear .circleGray, #cartBot2 .contain .circleGray').children('.hz').removeClass('active');
				$('#cartBot2 .contain .zong').css('display','block');
				$('#cartBot2 .contain .right').text('去结算');
				checkSumNum();
			}
		});

		//点击 去结算 或 删除按钮
		$('#cartBot2 .contain .right').on('click',function(){
			var str='';
			var all=$('#cartMain .contain .clear .circleGray .hz');
			for(var i=0;i<all.length;i++){
				if($(all[i]).closest('.clear').find('.circleGray .hz').hasClass('active')){
					var dataid=$(all[i]).closest('.clear').find('.circleGray').attr('cart_id');
					if(str=='')
					{
						str=dataid;
					}
					else
					{
						str+=','+dataid;
					}
				}
			}
			if(str=='')
			{
				tipFun('请选择商品');
			}
			else if($(this).text()=='去结算'){
				//var cart_id=$(ev.currentTarget.parentNode.parentNode.parentNode).attr('cart_id');
				//去结算操作
				window.location.href='{:U('Spellcart/step2')}&cart_id='+str
				//location.href='订单确认确认订单.html';
			}else if($(this).text()=='删除'){
				//删除操作
				$.ajax({
					//提交数据的类型 POST GET
					type:"POST",
					//提交的网址
					url:"{:U('Cart/del')}",
					//提交的数据
					data:{'cart_id':str},
					//返回数据的格式
					datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
					//在请求之前调用的函数
					//成功返回之后调用的函数             
					success:function(json){   
						tipFun('删除成功');
						setTimeout(function(){
							window.location.reload();
						},1000);
					}
				});
			}
		});

		//iscroll 下拉加载+zeptoajax
		function onload(){
			loadBin = document.getElementById("loadBin");
			myScroll = new IScroll('#wrapper',{
				probeType: 3,
				click:true
			});
			myScroll.on("scroll",scrollFun);
			myScroll.on("scrollEnd",scrollEndFun);
		}
		var page=1;
		var myScroll,
				loadBin,
				isload = false,
				scrollFun = function(){
					if((this.y - this.maxScrollY)>>0 < -50){
						isload = true;
						loadBin.innerHTML = "松开手指加载更多";
						myScroll.refresh();
						myScroll.off("scroll",scrollFun);
					}
				},
				scrollEndFun = function(){
					if(isload){
						isload = false;

						$.ajax({
							type: 'GET',
							url: '__PUBLIC__/Home/data/cart.html',
							dataType: 'json',
							success: function(data){
								page++;
								for(var i=0;i<data.lists.length;i++){
									$('#wrapper .list').append('<div class="clear" cart_id="'+data.lists[i].cart_id+'" max_num="'+data.lists[i].max_num+'"><div class="circleGray" cart_id="'+data.lists[i].cart_id+'"><span class="hz">&#xe613;</span></div><div class="center"><a href="'+data.lists[i].href+'"><img src="'+data.lists[i].img+'"></a></div><div class="right"><p class="title"><a href="'+data.lists[i].href+'">'+data.lists[i].title+'</a></p><div class="price"><p class="guige">'+data.lists[i].guige+'</p><p class="money"><em>¥<span>'+data.lists[i].chipMoney+'</span></em><del>¥<span>'+data.lists[i].guiMoney+'</span></del></p></div><div class="addJianCom"><a href="javascript:;" class="hz jian nooperate" attrid="32">&#xe616;</a><input type="text" value="'+data.lists[i].curr_num+'"><a href="javascript:;" class="hz add canoperate" attrid="32">&#xe615;</a></div></div></div>');
								}

								loadBin.innerHTML = "";
								myScroll.on("scroll",scrollFun);
								myScroll.refresh();

								//加载更多后，就不一定全选了
								$('#cartBot2 .contain .circleGray .hz').removeClass('active');
							},
							error: function(xhr, type){
								console.log('Ajax error!');
							}
						});
					}
				};
	</script>
</html>